/* Comment munging */

div.c_grade_browser {
    /* Test comment on own line */
    display: none; /* Test inline comments */
    // Test double slash comment
    foo: bar; // test inline double slash comment
}

/* Relative/absolute paths */

.rel-paths {
    attribute-one: url( resources/test.png ); /* No quotes */
    attribute-two: url( 'resources/test.png' ); /* Single quotes */
    attribute-three: url( "resources/test.png" ); /* Double quotes */
    
    attribute-four: url( /absolute/path/to/image.png ); /* No quotes */
    attribute-five: url( '/absolute/path/to/image.png' ); /* Single quotes */
    attribute-six: url( "/absolute/path/to/image.png" ); /* Double quotes */
}

/* NESTING */

body {
    /* With munger */
    border: 2px solid red;  /** ie **/
    border: 2px solid green;  /** ff **/
    border: 2px solid orange;  /** chrome **/
    border: 2px solid blue;  /** safari **/
    color: black;
    p, div {
        /* With munger */
        color: red; /** ie **/
        color: green; /** ff **/
        background-image: url(foo.jpg);
    }

}

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

/* PARENT SELECTORS */

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

/* NESTED PROPERTIES */

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/* VARIABLES */

$width: 5em;

#main {
  width: $width;
}

/* OPERATIONS */

p {
  width: 1pt + 8pt;
  height: 1pt - 8pt;
  top: 2 * 8pt;
  line-height: 9pt % 2;
}

/* Division */

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  height: (500px/2);          // Uses parentheses, does division
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/* Colour arithmetic */

p {
  color: #010203 + #040506;
}

p {
  color: #010203 * 2;
}

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.8);
  background-color: transparentize($translucent-red, 0.5);
}

/* String operations */

p {
  cursor: e + -resize;
}

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

p {
  margin: 3px + 4px auto;
}

p:before {
  content: "I ate #{5 + 10} pies!"; 
}  

/* Boolean operations */

$one: true;
$two: false;
p {
  attribute-one: $one and $two;
  attribute-two: $one or $two;
  attribute-three: not $one;
}

/* Parentheses */

p {
  width: 1em + (2em * 3);
}

/* FUNCTIONS */

p {
  color: hsl(0, 100%, 0.5);
}

/* INTERPOLATION */

$name: foo;
$attr: border;
p.#{$name} { 
    #{$attr}-color: blue;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/* VARIABLE DEFAULTS */

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

/* IMPORT */

@import "munge2.scss"; /* Should be imported */
@import "munge3.css"; /* Should not be imported */

/* EXTEND */

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

/* Extending complex selectors */

.hoverlink {@extend a:hover}
.comment a.user:hover {font-weight: bold}

/* Multiple extends */

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

/* Chaining extends */

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

/* Selector sequences */

#fake-links .link {@extend a}

a {
  color: blue;
  &:hover {text-decoration: underline}
}

/* Merging selector sequences */

#admin .tabbar a {font-weight: bold}
#demo .overview .fakelink {@extend a}

#admin .tabbar a {font-weight: bold}
#admin .overview .fakelink {@extend a}

/* @if / @else */

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

/* @for */

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

/* @while */

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

/* MIXINS */

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

/* Mixins with arguments */

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }


